<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>我的项目圈-人员管理</title>
		<link rel="stylesheet" type="text/css" href="../css/vue.css"/>
		<link rel="stylesheet" type="text/css" href="../css/common.css"/>
		<link rel="stylesheet" type="text/css" href="../css/myProject.css"/>
	</head>
	<body>
		<!--公共头部 start-->
		<div class="commonHead">
			<div class="commonHeadLeft">
				<a href="javascript:void(0);"><img src="../img/indexLogo.png" class="houseLogo"/></a>
			</div>
			<div class="commonHeadCenter">
				<ul>
					<li>
						<a class="active">项目圈</a>
					</li>
					<li>
						<a>材料数据库</a>
					</li>
					<li>
						<a>计算工具</a>
					</li>
					<li class="clear"></li>
				</ul>
			</div>
			<div class="commonHeadRight">
				<div class="infoCenter">
					<a href="javascript:void(0);">
						<span class="iconfont-tcl">&#xe643;</span>
						<span class="infoCenterText">消息中心</span>
						<span class="remindCircle"></span>
					</a>
				</div>
				<div class="loginInfo">
					<el-dropdown trigger="click">
						<span class="el-dropdown-link">
						    Kdd<i class="el-icon-caret-bottom el-icon--right"></i>
						</span>
						<el-dropdown-menu slot="dropdown">
						    <el-dropdown-item>账号设置</el-dropdown-item>
						    <el-dropdown-item>退出</el-dropdown-item>
						</el-dropdown-menu>
					</el-dropdown>
				</div>
				<div class="clear"></div>
			</div>
			<div class="clear"></div>
		</div>
		<!--公共头部 end-->
		
		<!--公共侧边栏 start-->
		<div class="commonSide">
			<div class="sideTitle">项目圈</div>
			<ul class="sideMenu">
				<li>
					<a href="javascript:void(0);">
						<span class="iconfont">&#xe611;</span>
						<span>我的项目</span>
					</a>
				</li>
				<li>
					<a href="javascript:void(0);">
						<span class="iconfont">&#xe60e;</span>
						<span>企业材料库</span>
					</a>
				</li>
				<li>
					<a href="javascript:void(0);">
						<span class="iconfont">&#xe610;</span>
						<span>我的收藏</span>
					</a>
				</li>
				<li class="active">
					<a href="javascript:void(0);">
						<span class="iconfont">&#xe879;</span>
						<span>员工管理</span>
					</a>
				</li>
			</ul>
		</div>
		<!--公共侧边栏 end-->
		
		<!--内容 start-->
		<div class="content">
			<div class="contentTop">
				<a class="contentBack">
					<span class="iconfont">&#xe60a;</span>
					<span class="backText">返回</span>
				</a>
				<span class="contentSever">|</span>
				<div class="contentTitle">侨乡物业项目</div>
				<span class="contentTitleSever">></span>
				<div class="contentSecondTitle">设计预评价</div>
				<div class="help">
					<a href="javascript:void(0)">
						<span class="iconfont">&#xe60c;</span>
						<span>技术支持</span>						
					</a>
				</div>
				<div class="clear"></div>
			</div>
			
			<!--项目圈内容 start-->
			<div class="memberManage">
				<div class="projectBox">
					<div class="memberList">
						<div class="memberListBtnBox">
							<el-button type="text" @click="dialogFormVisible = true" class="fl" style="padding: 0;"><button class="addMember greenBtn modalBoxControl">添加成员</button></el-button>
							<button class="whiteBtn delete fl">删除</button>
							<span class="fl mr20 ml20">|</span>
							<div class="inputBox">
								<label>手机号</label>
								<input type="text" placeholder="请输入手机号码">
								<button class="greenBtn">查询</button>
							</div>
							<div class="clear"></div>
						</div>
						<template>
							<div class="listDec">
								<div class="allSelecBox"><el-checkbox></el-checkbox></div>
								<div>账号</div>
								<div>姓名</div>
								<div>职位</div>
								<div>添加时间</div>
								<div class="clear"></div>
							</div>
							<ul class="memberDec">
								<li v-for="member in memberList">
									<el-checkbox></el-checkbox>
									<div>{{member.account}}</div>
									<div>{{member.name}}</div>
									<div>{{member.job}}</div>
									<div>{{member.time}}</div>
									<div class="clear"></div>
								</li>
							</ul>
						</template>
					</div>
					
					<!--分页器 start-->
					<div class="block">
						<div class="fr">
							 <span class="demonstration fl">调整每页显示条数</span>
						    <el-pagination
						      @size-change="handleSizeChange"
						      @current-change="handleCurrentChange"
						      :current-page="currentPage1"
						      :page-sizes="[10, 20, 30, 40]"
						      :page-size="10"
						      layout="sizes, prev, pager, next"
						      :total="50"
						      class="fl">
						    </el-pagination>
						    <div class="clear"></div>
						</div>
					   <div class="clear"></div>
					</div>
					<!--分页器 end-->
					
				</div>
				
				<!--模态框 start-->
				<el-dialog title="添加成员" v-model="dialogFormVisible">
				  	<el-form :model="form">
					    <el-form-item label="手机号/账号" :label-width="formLabelWidth">
					      	<!--<el-input v-model="form.name" auto-complete="off"></el-input>-->
					      	<el-autocomplete
							  	v-model="form.name"
							  	:fetch-suggestions="querySearchAsync"
							  	placeholder="请输入内容"
							  	@select="handleSelect"
							></el-autocomplete>
					    </el-form-item>
					    <el-form-item label="分配职位" :label-width="formLabelWidth">
					      	<el-select v-model="form.region" placeholder="请选择活动区域">
						        <el-option label="程序员" value="chengxuyuan"></el-option>
						        <el-option label="设计师" value="shejishi"></el-option>
						        <el-option label="产品经理" value="chanpinjingli"></el-option>
						        <el-option label="运维人员" value="yunweirenyuan"></el-option>
					      	</el-select>
					    </el-form-item>
				 	</el-form>
				  	<div slot="footer" class="dialog-footer">
					    <el-button @click="dialogFormVisible = false" style="border: 0;">取 消</el-button>
					    <el-button type="primary" @click="successful">保存</el-button>
				  	</div>
				</el-dialog>
				<!--模态框 end-->
				
				
				
			</div>
			<!--项目圈内容 end-->
		</div>
		<!--内容 end-->
		
	</body>
	<script type="text/javascript" src="../js/jquery.min.js"></script>
	<script type="text/javascript" src="../js/vue.js"></script>
	<script type="text/javascript" src="../js/vueComponent.js"></script>
	<script type="text/javascript" src="../js/component.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			//获取content宽度
			var contentWidth = $(window).innerWidth() - 180;
			$('.content').css('width',contentWidth + 'px');
			//获取content最小高度
			var contentMinHeight = $(window).innerHeight() - 60;
			$('.content').css('height',contentMinHeight + 'px');
			//获取projectBox最小高度
			var projectBoxMinHeight = $(window).innerHeight() - 170;
			$('.projectBox').css('min-height',projectBoxMinHeight + 'px');
			
			//全选控制
			$('.allSelecBox .el-checkbox__input').click(function(){
				var self = $(this);
				if(self.hasClass('is-checked')){
					$('.memberDec li .el-checkbox__input').removeClass('is-checked');
				}else if(!self.hasClass('is-checked')){
					$('.memberDec li .el-checkbox__input').addClass('is-checked');
				}
			});
		});
		
		new Vue({
			el:'.loginInfo'
		});

		new Vue({
			el:'.memberManage',
			data:function(){
				return{
					memberList:[
						{
							account:'18601084493',
							name:'Kdd',
							job:'设计师',
							time:'2017-10-11 10:30'
						},
						{
							account:'18601084493',
							name:'Kdd',
							job:'设计师',
							time:'2017-10-11 10:30'
						},
					],
					dialogFormVisible: false,
			        form: {
				        name: '',
				        region: '',
				        date1: '',
				        date2: '',
				        delivery: false,
				        type: [],
				        resource: '',
				        desc: ''
			        },
			        restaurants: [],
			        timeout:  null,
			        formLabelWidth: '120px',
			        currentPage1: 1,
				}
			},
			methods:{
				handleSizeChange(val) {
			        console.log(`每页 ${val} 条`);
			    },
			    handleCurrentChange(val) {
			        this.currentPage = val;
			        console.log(`当前页: ${val}`);
			    },
			    successful(){
			        this.$message({
			          	message: '保存成功！',
			          	type: 'success'
			        });
			        this.dialogFormVisible = false;
			    },
			    loadAll() {
			        return [
				        { "value": "三全鲜食（北新泾店）", "address": "长宁区新渔路144号" },
				        { "value": "Hot honey 首尔炸鸡（仙霞路）", "address": "上海市长宁区淞虹路661号" },
				        { "value": "新旺角茶餐厅", "address": "上海市普陀区真北路988号创邑金沙谷6号楼113" },
				    ];
			    },
			    querySearchAsync(queryString, cb) {
			        var restaurants = this.restaurants;
			        var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;
			
			        clearTimeout(this.timeout);
			        this.timeout = setTimeout(() => {
			          cb(results);
			        },0);
			    },
			    createStateFilter(queryString) {
			        return (state) => {
			          	return (state.value.indexOf(queryString.toLowerCase()) === 0);
			        };
			    },
			    handleSelect(item) {
			        console.log(item);
			    }
			},
			mounted() {
			    this.restaurants = this.loadAll();
			}
		});
	</script>
</html>
